<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/jsp/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>值班设置</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctxStatic}/plugins/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/plugins/h+/css/plugins/webuploader/webuploader.css">
    <link href="${ctxStatic}/plugins/h+/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .bigger{
            position: fixed;
            width: 300px;
            height: auto;
            max-height: 80%;
            top: 30%;
            left: 50%;
            margin-left: -150px;
            z-index: 9999;
        }

        .laydate_table {
            display: none;
        }

    </style>

</head>

<body class="gray-bg" >
    <div class="wrapper wrapper-content  animated fadeInRight" id="ccbb">
        <div class="row">
            <div class="col-sm-12">
                <div class="toolbar">
                        <div id="toolbar">
                            <%--<button id="btn_add" class="btn btn-primary"><i class="fa fa-plus-circle"></i>&nbsp;新增</button>
                            <button id="btn_del" class="btn btn-w-s btn-danger"><i class="fa fa-times-circle"></i>&nbsp;批量删除</button>--%>
                            <%--<button id="button" class="btn btn-primary " ><i class="fa fa-check-circle"></i>&nbsp;获取选中</button>--%>
                            <%--<button id="btn_getCheck姓名" class="btn btn-primary " ><i class="fa fa-check-square"></i>&nbsp;获取选中ChekBox</button>--%>
                        </div>
                </div>
                <span id="spancc" class="spancc"></span>
                <div class="row">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>搜索条件</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content" >
                            <div class="row">
                                <div class="col-md-2"><input placeholder="值班人" class="form-control" id="search_personName"></div>
                                <div class="col-md-2"><input placeholder="月份" id="search_date" class="form-control layer-date" onclick="laydate({istime: false, format: 'YYYY-MM'})" id="date"></div>
                                <%--<div class="col-md-2">
                                    <select data-placeholder="状态" class="chosen-select form-control"  id="search_state" >
                                        <option value="">请选择</option>
                                        <option value="0">未设置</option>
                                        <option value="1">已设置</option>
                                    </select>
                                </div>--%>
                                <%--<div class="col-md-2"><input placeholder="结束日期" id="search_enddate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" id="end"></div>--%>
                                <div class="col-md-1"><button id="btn_search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;搜索</button></div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="bootstrap-table">
                    <div class="fixed-table-container" style="height: 500px; padding-bottom: 36px;">
                        <%--<div class="fixed-table-header" style="margin-right: 0px;">
                            <table class="table table-hover" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th style="width:25%; text-align: center;" data-field="grade" tabindex="0">
                                        <div class="th-inner ">日期</div>
                                        <div class="fht-cell" ></div>
                                    </th>
                                    <th style="width:25%; text-align: center;" data-field="integral" tabindex="0">
                                        <div class="th-inner ">星期</div>
                                        <div class="fht-cell" ></div>
                                    </th>
                                    <th style="width:25%; text-align: center;" data-field="gradeName" tabindex="0">
                                        <div class="th-inner ">状态</div>
                                        <div class="fht-cell" ></div>
                                    </th>
                                    <th style="width:25%; text-align: center;" data-field="remarks" tabindex="0">
                                        <div class="th-inner ">值班人</div>
                                        <div class="fht-cell" ></div>
                                    </th>

                                </tr>
                                </thead>
                            </table>
                        </div>--%>
                        <div class="fixed-table-body">
                            <div class="fixed-table-loading" style="top: 37px; display: none;">正在努力地加载数据中，请稍候……</div>
                            <table id="exampleTablePagination" class="table table-hover" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th style="text-align: center;" data-field="grade" tabindex="0">
                                        <div class="th-inner ">日期</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="text-align: center;" data-field="integral" tabindex="0">
                                        <div class="th-inner ">星期</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="text-align: center;" data-field="gradeName" tabindex="0">
                                        <div class="th-inner ">状态</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="text-align: center;" data-field="remarks" tabindex="0">
                                        <div class="th-inner ">值班人</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                </tr>
                                </thead>
                                <tbody id="t_body">

                                </tbody>
                            </table>
                        </div>
                        <div class="fixed-table-footer" style="display: none;">
                            <table>
                                <tbody>
                                <tr></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="${ctxStatic}/plugins/h+/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxStatic}/plugins/h+/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/bootstrap-table.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/export/bootstrap-table-export.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/editable/bootstrap-table-editable.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/content.min.js?v=1.0.0"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/layer/laydate/laydate.js"></script>
    <script>

    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <script type="text/javascript">
            /*
                获取选中行的相关数据
            */
            $(function () {
                $("#laydate_hms").css("display","none");

                //获取完整的日期
                var date=new Date;
                var year=date.getFullYear();
                var month=date.getMonth()+1;
                month =(month<10 ? "0"+month:month);
                $("#search_date").val(year+"-"+month);
                loadDate();

            });


            //加载数据
            function loadDate()
            {
                var selectDate=$("#search_date").val();
                var weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
                var year = selectDate.substring(0,selectDate.indexOf('-'))
                var month=selectDate.substring(selectDate.indexOf('-')+1,selectDate.length);
                var days = getDaysInMonth(year,month);
                var html;
                var startDate=(year+'-'+month+'-1');
                var endDate=(year+'-'+month+'-'+days);
                $.ajax( {
                    url:'${pageContext.request.contextPath}/sysUser/getDutyListByDate.ac?startDate='+startDate+'&endDate='+endDate,// 跳转到 action
                    data:{},
                    type:'post',
                    cache:false,
                    dataType:'json',
                    success:function(data) {
                            var personName=$.trim($("#search_personName").val());
                            for(var i=0;i<days;i++)
                            {
                                var dutyName='<a style="color:#337ab7;text-decoration:none" href="javascript:void(0)" onclick="settingDuty()" >未设置（点击设置）</a>';
                                var state='<font style="color:red">未设置</font>';
                                var regEx = new RegExp("\\-","gi");
                                for(var j=0;j<data.length;j++)
                                {
                                    if(Date.parse(data[j].dutyDate.replace(regEx,"/"))==Date.parse(month+'/'+(i+1)+'/'+year+' 00:00:00'))
                                    {
                                        dutyName=data[j].personName;
                                        state='<font style="color:green">已设置</font>';
                                    }
                                }
                                if(personName!=''&& dutyName.indexOf(personName)<0)
                                {
                                    continue;
                                }else
                                {
                                    html+=  '<tr data-index="0">'+
                                    '       <td style="text-align: center; width: 25%;">'+(i+1)+'日</td>'+
                                    '       <td style="text-align: center; width: 25%;">'+weekArray[(new Date(Date.parse(month+'/'+(i+1)+'/'+year))).getDay()]+'</td>'+
                                    '       <td style="text-align: center; width: 25%;">'+state+'</td>'+
                                    '       <td style="text-align: center; width: 25%;">'+dutyName+'</td>'+
                                    '</tr>';
                                }

                            }

                            $("#t_body").html(html);

                    }});


            }

            function settingDuty()
            {
                var url = '${pageContext.request.contextPath}/sysUser/toSettingDuty.ac';
                parent.layer.open({
                    type: 2,
                    shift:4,//动画类型
                    moveType:1,
                    maxmin: true,
                    shadeClose: true, //开启遮罩关闭
                    area: ['650px', '400px'],
                    content: url,
                    success: function(layero, index){
                        loadDate();
                        return true;
                    },
                    cancel: function(index){
                        loadDate();
                        return true;
                    },
                    close  : function(index){
                        loadDate();
                    },
                    end : function(index){
                        loadDate();
                    }

                });
            }
            function getDaysInMonth(year,month){
                month = parseInt(month,10); //parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话，默认是10进制。
                var temp = new Date(year,month,0);
                return temp.getDate();
            }
            /*
               操作按钮的初始化
            */
            function userOperation(value, row, index) {
                return [
                            '<a class="edit ml10" href="javascript:void(0)" title="编辑">',
                            '<i class="glyphicon glyphicon-edit"></i>',
                            '</a>',
                            '<a class="remove ml10" href="javascript:void(0)" title="删除">',
                            '<i class="glyphicon glyphicon-remove"></i>',
                            '</a>'
                        ].join('');
            }

            /*
                每一列详情格式化数据
             */
            function formDetail(index, row) {
//                return row.detail+index;
            }


            function showPopup(type,id){
                var url = "";
                if(type==0) {
                    url = '${pageContext.request.contextPath}/sysUser/toAddGrade.ac';
                }else if(type==1) {
                    url = '${pageContext.request.contextPath}/sysUser/toEditGrade.ac?id='+id;
                }
                //自定页
                parent.layer.open({
                    type: 2,
                    shift:4,//动画类型
                    moveType:1,
                    maxmin: true,
                    shadeClose: true, //开启遮罩关闭
                    area: ['700px', '530px'],
                    content: url,
                    success: function(layero, index){

                    },
                    cancel: function(index){
//                        $table.bootstrapTable('refresh', queryParams);
//                        return true;
                    },
                    close  : function(index){

                    },
                    end : function(index){

                    }
                });
            }


            /*
                搜索按钮
            */
            $("#btn_search").click(function(){
                loadDate();
            });

            ///////////////////////////////////////////////////////////////toolbar///////////////////////////////////////
            //新增
            /*$("#btn_add").click(function(){
                showPopup(0,null);
            });*/


            //获取选中的CheckBox
            /*$("#btn_getCheck").click(function(){
               alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
               alert("客户信息:"+$table.bootstrapTable('getSelections')[0].userName);
            });*/

            /*
            获取所有选中的CheckBox的主键值 【数组】
             */
            function getSelections() {
                return $.map($table.bootstrapTable('getSelections'), function (row) {
                    return row.id;
                });
            }


        </script>
</body>


</html>
